<!DOCTYPE html>
<html lang="en" xmlns:sa="http://www.thymeleaf.org/extras/sa-token"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>大模型提供商管理</title>
    <style>
        .custom-tree-item-clicked {
            color: #FC9003
        }
    </style>
    <!--公共模块-->
    <div th:replace="~{layout}"></div>
</head>
<body>
<div class="panel panel-default operation_provider" hidden>
    <div class="panel-heading title"></div>
    <div class="layui-card-body">
        <form class="layui-form " action="" lay-filter="info" style="width: 700px;margin-top: 10px">
            <input name="id" hidden/>

            <div class="layui-form-item">
                <label class="layui-form-label">供应商名称</label>
                <div class="layui-input-block">
                    <input type="text" name="providerName" placeholder="请输入供应商名称" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-form-label ">供应商标识</div>
                <div class="layui-input-block">
                    <input type="text" name="providerEn" placeholder="请输入供应商标识" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">供应商图标</label>
                <div class="layui-input-block">
                    <input type="text" name="providerIcon" placeholder="请输入供应商图标URL" autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">状态</label>
                <div class="layui-input-block">
                    <input type="checkbox" name="status" value="1" lay-skin="switch" title="启用|禁止"
                           lay-filter="switch" checked="checked">
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button type="submit" class="layui-btn" lay-submit="" lay-filter="submit">保存</button>
                    <button class="layui-btn layui-btn-primary" id="btn_cancel">返回</button>
                </div>
            </div>
        </form>
    </div>
</div>

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-sm12 layui-col-md12 layui-col-lg12">
            <div class="provider_table_div">
                <div id="searchParam" sa:hasPermission="models:provider:list">
                    <form class="layui-form layui-form-pane" action="">
                        <div class="layui-form-item">
                            <div class="layui-input-inline">
                                <input type="text" name="providerName" class="layui-input" autocomplete="off"
                                       placeholder="请输入供应商名称">
                            </div>
                            <div class="layui-input-inline">
                                <input type="text" name="providerEn" class="layui-input" autocomplete="off"
                                       placeholder="请输入供应商标识">
                            </div>

                            <div class="layui-input-inline ">
                                <button type="submit" class="layui-btn layui-btn-primary" lay-submit lay-filter="data-search-btn">
                                    <i class="layui-icon"></i> 搜 索
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
                <table class="layui-hide" id="provider_table" lay-filter="provider_table"></table>
            </div>
        </div>
    </div>
</div>

</body>
<script type="text/html" id="toolbar">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="addNewProvider" sa:hasPermission="models:provider:add">添加</button>
        <button class="layui-btn layui-btn-sm" lay-event="batchDeleted" sa:hasPermission="models:provider:delete">删除</button>
    </div>
</script>
<script type="text/html" id="tool">
    <a class="layui-btn layui-btn-xs" lay-event="edit" sa:hasPermission="models:provider:update">添加模型</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit" sa:hasPermission="models:provider:update">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" sa:hasPermission="models:provider:delete">删除</a>
</script>
<script>
    layui.use(function () {
        var table = layui.table;
        var form = layui.form;
        var layer = layui.layer;

        //加载table
        var tableIns = table.render({
            elem: '#provider_table',
            contentType: 'application/json',
            page: true, //开启分页
            url: ctx + 'models/providers', //数据接口
            method: 'POST',
            parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": CoreUtil.isEmpty(res.data) ? 0 : res.data.total, //解析数据长度
                    "data": CoreUtil.isEmpty(res.data) ? null : res.data.records //解析数据列表
                }
            },
            cols: [
                [
                    {type: 'checkbox', fixed: 'left'},
                    {field: 'providerName', title: '供应商名称', width: 130},
                    {field: 'providerEn', title: '供应商标识', width: 130},
                    {field: 'providerIcon', title: '供应商图标', width: 120},
                    {field: 'status', title: '状态', width: 100, templet: function(d){
                        return d.status == 1 ? '启用' : '禁用';
                    }},
                    {field: 'createTime', title: '创建时间', minWidth: 120},
                    {field: 'updateTime', title: '更新时间', minWidth: 120},
                    {width: 200, toolbar: "#tool", title: '操作'}
                ]
            ],
            toolbar: '#toolbar'
        });

        table.on('toolbar(provider_table)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'batchDeleted':
                    var data = checkStatus.data;
                    if (data.length == 0) {
                        layer.msg("请选择要批量删除的供应商");
                    } else {
                        var ids = [];
                        $(data).each(function (index, item) {
                            ids.push(item.id);
                        });
                        tipDialog(ids, "选中的");
                    }
                    break;
                case 'addNewProvider':
                    $(".title").html("新增供应商");
                    $(".provider_table_div").hide();
                    $(".operation_provider").show();
                    resetForm(); // 重置表单内容
                    break;
            }
        });

        table.on('tool(provider_table)', function (obj) {
            var data = obj.data;
            switch (obj.event) {
                case 'del':
                    var ids = [];
                    ids.push(data.id);
                    tipDialog(ids, data.providerName);
                    break;
                case 'edit':
                    $(".provider_table_div").hide();
                    $(".operation_provider").show();
                    $(".title").html("编辑供应商");
                    fillForm(data); // 填充表单内容
                    break;
            }
        });

        $("#btn_cancel").click(function () {
            $(".provider_table_div").show();
            $(".operation_provider").hide();
            return false;
        });

        var tipDialog = function (ids, name) {
            layer.open({
                content: '确定要删除' + name + "供应商么?",
                yes: function (index, layero) {
                    layer.close(index);
                    CoreUtil.sendDelete(ctx + "models/provider", ids, function (res) {
                        layer.msg(res.msg);
                        tableIns.reload();
                    });
                }
            });
        };

        form.on('submit(submit)', function (data) {
            //checkbox值 没有选中默认0
            data.field.status = CoreUtil.isEmptyGet(data.field.status, 0);

            if (data.field.id === undefined || data.field.id === null || data.field.id === "") {
                CoreUtil.sendPost(ctx + "models/provider", data.field, function (res) {
                    $(".provider_table_div").show();
                    $(".operation_provider").hide();
                    tableIns.reload();
                });
            } else {
                CoreUtil.sendPut(ctx + "models/provider", data.field, function (res) {
                    $(".provider_table_div").show();
                    $(".operation_provider").hide();
                    tableIns.reload();
                });
            }
            return false;
        });

        // 定义一个函数来重置表单内容
        function resetForm() {
            form.val('info', {
                'id': '',
                'providerName': '',
                'providerEn': '',
                'providerIcon': '',
                'status': true
            });
            form.render(); // 更新全部
        }

        // 定义一个函数来填充表单内容
        function fillForm(data) {
            form.val('info', {
                'id': data.id,
                'providerName': data.providerName,
                'providerEn': data.providerEn,
                'providerIcon': data.providerIcon,
                'status': data.status === 1
            });
            form.render(); // 更新全部
        }

        // 监听搜索操作
        form.on('submit(data-search-btn)', function (data) {
            //执行搜索重载
            tableIns.reload({
                page: {
                    curr: 1
                },
                where: data.field
            });
            return false;
        });
    });
</script>
</html>